<template>
    <nav>
        <div class="nav_box">
            <!-- logo -->
            <div class="nav_box_logo">
                <img src="../assets/Head/logo.png" alt="" />
            </div>
            <!-- 导航 -->
            <div class="nav_box_nav">
                <ul>
                    <li>
                        <a href="#" class="kong"></a>
                    </li>
                    <!--导航区-->
                    <li v-for="(item,index) in navlist1" :key="item.index">
                        <a href="#" @mousemove="come(index)">{{item.TradeName}}</a>
                    </li>
                </ul>
            </div>
            <!-- 搜索框 -->
            <div class="nav_box_input">
                <input type="text" name="" id="" v-model="MerchandiseName" :placeholder="MerName" autofocus />
                <span class="input_search">
                    <button><i class="el-icon-position"></i></button>
                </span>
            </div>
            
        </div>
        <!-- 下拉菜单 -->
        <div class="nav_box_down" v-show="isShow"  ref="down">
                <div class="nav_box_list" @mouseleave="leave">
                        <ul>
                            <!-- 利用数值变化遍历数组对象 -->
                            <li v-for="item in navlist1[Number(index)].downMuen" :key="item.url">
                                <a href="#">
                                    <!-- 内容区 -->
                                    <div class="nav_down_img">
                                        <img :src="item.url" alt="">
                                        <p>{{item.text}}</p>
                                        <p style="color:#ff6700">{{item.price}}</p>
                                    </div>
                                </a>
                            </li>
                        </ul>
                </div> 
        </div>
    </nav>
</template>

<script>


export default {
    name: "Nav",
    data() {
        return {
            // 输入框内容
            MerchandiseName:"",
            MerName: "手机",
            // 下拉菜单显示与隐藏
            isShow:false,
            // 当下导航
            index:'',
            // 列表
            navlist1:[
                // Xiaomi手机
                {
                    TradeName:'Xiaomi手机',
                    downMuen:[
                    {
                    url:require('../assets/Navimg/Xiaomi01.png'),
                    text:'Xiaomi MIX -Fold2',
                    price:'8999元起'
                    },
                    {
                    url:require('../assets/Navimg/Xiaomi02.png'),
                    text:'Xiaomi 12S Ultra',
                    price:'5999元起'
                    },
                    {
                    url:require('../assets/Navimg/Xiaomi03.png'),
                    text:'Xiaomi 12S Pro',
                    price:'4699元起'
                    },
                    {
                    url:require('../assets/Navimg/Xiaomi04.png'),
                    text:'Xiaomi 12S',
                    price:'3999元起'
                    },
                    {
                    url:require('../assets/Navimg/Xiaomi04.png'),
                    text:'Xiaomi Civi 1S',
                    price:'3999元起'
                    },
                     {
                    url:require('../assets/Navimg/Xiaomi05.png'),
                    text:'Xiaomi Civi 1S',
                    price:'2299元起'
                    },
                    ]
                },
                //Redmi手机
                 {
                   TradeName:'Redmi手机',
                    downMuen:[
                    {
                    url:require('../assets/Navimg/Redmi01.png'),
                    text:'Redmi K50 至尊版',
                    price:'2999元起'
                    },
                    {
                    url:require('../assets/Navimg/Redmi02.png'),
                    text:'Redmi Note 11T Pro+',
                    price:'1999元起'
                    },
                    {
                    url:require('../assets/Navimg/Redmi03.png'),
                    text:'Redmi Note 11T Pro',
                    price:'1599元起'
                    },
                    {
                    url:require('../assets/Navimg/Redmi04.png'),
                    text:'Redmi Note 11SE',
                    price:'999元起'
                    },
                    {
                    url:require('../assets/Navimg/Redmi05.png'),
                    text:'Redmi 10A',
                    price:'699元起'
                    },
                     {
                    url:require('../assets/Navimg/Redmi06.png'),
                    text:'Redmi K50 Pro',
                    price:'2999元起'
                    },
                    
                    ] 
                },
                // 电视
                {
                   TradeName:'电视',
                    downMuen:[
                    {
                    url:require('../assets/Navimg/DS01.png'),
                    text:'Redmi智能电视X55 2022',
                    price:'2299元起'
                    },
                     {
                    url:require('../assets/Navimg/DS02.png'),
                    text:'Redmi智能电视X65 2022',
                    price:'2299元起'
                    },
                     {
                    url:require('../assets/Navimg/DS03.png'),
                    text:'小米电视6 65”  OLED',
                    price:'6699元'
                    },
                     {
                    url:require('../assets/Navimg/DS04.png'),
                    text:'小米电视 大师  77”  OLED',
                    price:'17999元'
                    },
                     {
                    url:require('../assets/Navimg/DS05.png'),
                    text:'小米透明电视',
                    price:'49999元'
                    },
                     {
                    url:require('../assets/Navimg/DS06.png'),
                    text:'小米电视 大师 65英寸OLED',
                    price:'8999元'
                    },
                    
                    ] 
                },
                // 笔记本
                {
                   TradeName:'笔记本',
                    downMuen:[
                    {
                    url:require('../assets/Navimg/Notebook01.png'),
                    text:'Xiaomi Book Pro 14 锐龙版',
                    price:'6399元起'
                    },
                    {
                    url:require('../assets/Navimg/Notebook02.png'),
                    text:'Redmi G 游戏本 2022',
                    price:'7499元起'
                    },
                    {
                    url:require('../assets/Navimg/Notebook03.png'),
                    text:' Xiaomi Book Pro 14 2022 ',
                    price:'6799元起'
                    },
                    {
                    url:require('../assets/Navimg/Notebook04.png'),
                    text:'Xiaomi MIX -Fold2',
                    price:'8999元起'
                    },
                    {
                    url:require('../assets/Navimg/Notebook05.png'),
                    text:' Xiaomi Book Pro 16 2022',
                    price:'7399元起'
                    },
                    {
                    url:require('../assets/Navimg/Notebook06.png'),
                    text:'Redmi Pro14 2022 锐龙版',
                    price:'5299元起'
                    },
                    ] 
                },
                // 平板
                 {
                   TradeName:'平板',
                    downMuen:[
                    {
                    url:require('../assets/Navimg/Flat01.png'),
                    text:'小米平板5 Pro 12.4',
                    price:'2999元起'
                    },
                    {
                    url:require('../assets/Navimg/Flat02.png'),
                    text:'小米平板5',
                    price:'1999元起'
                    },
                    {
                    url:require('../assets/Navimg/Flat03.png'),
                    text:'小米平板5 Pro 5G',
                    price:'3499元'
                    },
                    {
                    url:require('../assets/Navimg/Flat04.png'),
                    text:'小米平板5 Pro',
                    price:'2499元起'
                    },
                    ] 
                },
                // 家电
                 {
                   TradeName:'家电',
                    downMuen:[
                    {
                    url:require('../assets/Navimg/Appliances01.png'),
                    text:'巨省电 | 米家空调 新一级 1.5匹 睡眠版',
                    price:'2199元'
                    },
                    {
                    url:require('../assets/Navimg/Appliances02.png'),
                    text:'巨省电 3匹|变频|新一级能效（鎏金款）',
                    price:'5099元'
                    },
                    {
                    url:require('../assets/Navimg/Appliances03.png'),
                    text:'米家扫拖机器人1T',
                    price:'999元'
                    },
                    ] 
                },
                // 路由器
                {
                   TradeName:'路由器',
                    downMuen:[
                    {
                    url:require('../assets/Navimg/Router01.png'),
                    text:'Redmi 电竞路由器 AX5400',
                    price:'599元'
                    },
                    {
                    url:require('../assets/Navimg/Router02.png'),
                    text:'小米路由器AX6000',
                    price:'549元'
                    },
                    {
                    url:require('../assets/Navimg/Router03.png'),
                    text:'小米路由器AX9000',
                    price:'1299元'
                    },
                    {
                    url:require('../assets/Navimg/Router04.png'),
                    text:'Xiaomi HomeWiFi 三频 Mesh 路由器',
                    price:'1499元'
                    },
                    {
                    url:require('../assets/Navimg/Router01.png'),
                    text:'小米路由器4A 千兆版',
                    price:'129元'
                    },
                    {
                    url:require('../assets/Navimg/Router01.png'),
                    text:'查看全部小米路由器',

                    },
                    ] 
                },
                // 服务中心
                {
                   TradeName:'服务中心',
                    downMuen:[
                    {
                    url:require('../assets/Navimg/Xiaomi01.png'),
                    text:'Xiaomi MIX -Fold2',
                    price:'8999元起'
                    },
                    ] 
                },
                // 社区
                {
                   TradeName:'社区',
                    downMuen:[
                    {
                    url:require('../assets/Navimg/Xiaomi01.png'),
                    text:'Xiaomi MIX -Fold2',
                    price:'8999元起'
                    },
                    ] 
                },
            ],
         
        };
    },
    methods:{
        // 下拉菜单效果
       leave(){
            this.$refs.down.style.animation='xiaochuan1 .7s  forwards';
       },
        // 获取导航index来改变下拉
       come(index){
        this.index=index
        if(index==this.navlist1.length-2||index==this.navlist1.length-1)
        {
           this.$refs.down.style.animation='xiaochuan1 .7s  forwards';
          
        }else{
        this.isShow=true
        this.$refs.down.style.animation='xiaochuan .7s  forwards';
        }
       }
    }
};
</script>

<style>
nav {
    position: relative;
    width: 100%;
    height: 100px;
}

nav .nav_box {
    margin: 0 auto;
    width: 1226px;
    height: 100%;
    font-size: 12px;
}

/* logo */
.nav_box .nav_box_logo {
    float: left;
    width: 62px;
    margin-top: 20px;
}

.nav_box_logo img {
    width: 100%;
    height: 100%;
    justify-content: center;
}

.nav_box_nav {
    float: left;
    width: 850px;
    height: 100px;
}

.nav_box_nav ul li {
    float: left;
}

.nav_box_nav ul .kong {
    float: left;
    width: 127px;
    padding-right: 15px;
}

.nav_box_nav ul li a {
    display: block;
    font-size: 17px;
    line-height: 50px;
    padding: 26px 10px 38px;
    color: #333;
}

.nav_box_nav ul li a:hover {
    color: #ff6700;
}

/* 下拉菜单 */
nav .nav_box_down {
    position:absolute;
    overflow: hidden;
    top:100px;
    width:100%;
    box-shadow: 2px 2px 9px rgb(203, 203, 203);
    animation: xiaochuan .7s  forwards;
    z-index: 99;
    background-color: white;
}
nav .nav_box_list{
    margin: 0 auto;
    width: 1226px;
    height: 100%;
    font-size: 12px;
}


/* 下拉菜单动画 */
@keyframes xiaochuan{
    0%{
        height: 0px;
    }
    100%{
        height: 230px;
    }
}

@keyframes xiaochuan1{
    0%{
        height: 230px;
    }
    100%{
        height: 0px;
    }
}

/* 下拉菜单列表 */
.nav_box_down .nav_box_list ul li{
    position: relative;
    float: left;
    width: 204px;
    height: 201px;
}

.nav_box_down .nav_down_img{
    position:absolute;
    top:20px;
    left:20px;
    width:160px;
    height:110px;
   
}
.nav_box_down .nav_down_img p{
    margin-top: 5px;
    color: #333;
    text-align: center;
}
.nav_down_img:hover{
    border-radius: 5px;
   box-shadow: 1px 2px 10px #ccc;
}
/* 输入框 */
.nav_box_input {
    position: relative;
    float: right;
    width: 296px;
}

.nav_box_input input {
    width: 245px;
    height: 50px;
    margin: 25px 0px 0px -10px;
    outline: none;
    font-size: 15px;
    border: 1px solid #ccc;
}

.input_search {
    display: inline-block;
    position: absolute;
    top: 25px;
    width: 50px;
    height: 50px;
    border-right: 1px solid #ccc;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

.input_search button {
    width: 100%;
    height: 100%;
    border: 0px;
    outline: none;
    cursor: pointer;
    background-color: white;
}

.el-icon-position {
    font-size: 25px;
}

.input_search button:hover {
    background-color: #ff6700;
}

.input_search button:hover .el-icon-position {
    color: white;
}
</style>
